<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>Canvas</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${base}/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="${base}/static/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="${base}/static/css/scrollBar.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${base}/static/css/responsive.css" />
    <script src="${base}/static/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .img img {
            max-height: 85%;
            max-width: 100px;
        }
    </style>
    <style type="text/css">
        @import "./script/svg/jquery.svg.css?vno=8";
        @import "./script/css/oldc.css?vno=8";
        .svgText{
            position: fixed;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100px;
        }
        select {
            height: 30px;
            width: 204px!important;
        }
        textarea{
            width: 200px!important;
            height: 50px;
        }
        input[type=text]{
            height: 26px;
            width: 200px!important;
        }
        .form-group{
            margin-bottom: 10px;
        }
        .form-group label{
            text-align: left;
            width: 100px;
            display: inline-block;
            vertical-align: center;
        }

        .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 20px 0;
            border-radius: 4px;
        }
        .pagination>li {
            display: inline;
        }

        .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .pagination>li:first-child>a, .pagination>li:first-child>span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        .pagination>li>a {
            background: #fafafa;
            color: #666;
        }
        .pagination-sm>li>a, .pagination-sm>li>span {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
        }
        .pagination>li>a, .pagination>li>span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .blue{
            color: #1971a8;
            font-size: 14px;
        }
        .pagination .current a{
            background-color: rgba(10, 10, 10, 0.31)!important;
        }
    </style>
    <script type="text/javascript" src="./script/common.js"></script>
    <script src="./node_modules/requirejs/require.js"></script>
</head>
<body>
<div class="canvas-box">
    <div class="hd">
        <div class="left">
            <h3>Godiva parameter</h3>
            <a id="redact-btn" href="javascript:void(0);"></a>
        </div>
        <div class="btns g-button-wrap">
            <button class="undo-button border " type="button">undo</button>
            <button class="cancel-button" type="button">Cancel</button>
            <button class="save-button border " type="button">Save</button>
        </div>
    </div>
    <div class="bd ">
        <div class="product-sidebar">
            <div class="collapse">
                <#list icons?keys as key>
                <div class="colla-item">
                    <div class="colla-tit ">
                        <h3>${key!}</h3>
                    </div>
                    <div class="colla-content " >
                        <ul>
                            <#list icons[key] as icon>
                            <li>
                                <a href="javascript:void(0);">
                                    <div class="img">
                                        <img src="${base}${icon.photo!}" x="" alt="">
                                    </div>
                                    <div class="txt">
                                        <p>${icon.name!}</p>
                                    </div>
                                </a>
                            </li>
                            </#list>
                        </ul>
                    </div>
                </div>
                </#list>
            </div>
        </div>
        <div class="component-content">
            <div id="svgcontainer"></div>
        </div>
        <div class="parameter-slidebar">
            <button class="close-button" type="button"></button>
            <div class="content scrollBox">
                <div class="title">
                    <h3>Camera</h3>
                </div>
                <form action="">
                    <div class="size item">
                        <div class="tit">
                            Camera Height
                        </div>
                        <div class="area">
                            <div class="height">
                                <span>H</span>
                                <input type="text" name="" id="" value="4" />
                                <select name="">
                                    <option value="m">m</option>
                                </select>
                            </div>
                            <div class="radio-box">
                                <div class="input-radio">
                                    <label class="g-radio">
                                        <input type="radio" name="c1" id="" value="">
                                        <i></i>
                                        <span>Handhold</span>
                                    </label>
                                </div>
                                <div class="input-radio">
                                    <label class="g-radio">
                                        <input type="radio" name="c1" id="" value="" />
                                        <i></i>
                                        <span>Tripod</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rotate item">
                        <div class="tit">
                            Tilt Angle
                        </div>
                        <div class="area">
                            <div class="rotate-input">
                                <input type="text" name="" id="" value="0°" />
                            </div>
                        </div>
                    </div>
                    <div class="list item">
                        <ul>
                            <li>
                                <div class="tit">Lens</div>
                                <div class="down">
                                    <div class="input-block">
                                        <input type="text" name="" id="" value="20 mm f/2.8" />
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="tit">ISO</div>
                                <div class="down">
                                    <div class="input-block">
                                        <input type="text" name="" id="" value="ISO-100" />
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="tit">Aperature</div>
                                <div class="down">
                                    <div class="input-block">
                                        <input type="text" name="" id="" value="F4" />
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="tit">Shutter</div>
                                <div class="down">
                                    <div class="input-block">
                                        <input type="text" name="" id="" value="1/90" />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="Notes item">
                        <div class="tit">
                            Notes (Optional)
                        </div>
                        <div class="area">
                            <div class="input-textarea">
                                <textarea placeholder="Enter notes"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="sample item">
                        <div class="tit">
                            Sample Photos (Optional)
                        </div>
                        <div class="photos-list ">
                            <div class="file">
                                <input type="file" name="file" accept="image/*" id="upload" multiple="">
                                <div class="desc">
                                    <div class="box">
                                        <p class="t1">Drag and drop images here</p>
                                        <p class="t2">- or -</p>
                                        <p class="t3">Browse files from your computer</p>
                                    </div>
                                </div>
                            </div>
                            <div class="content-img scrollBox">
                                <ul class="content-img-list ">
                                    <li>
                                        <div class="img">
                                            <img src="images/img_02.png" alt="">
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <img src="images/img_03.png" alt="">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 遮罩层 -->
<div class="shade"></div>
<script src="${base}/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/uploadimg.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/scrollBar.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/script.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $('.colla-item').each(function(){
            var _this = $(this);
            var item = _this.find('li');
            var content = _this.find(".colla-content");
            item.on("click",function(){
                $(this).addClass("active").siblings().removeClass('active');
            });
            if(item.length >4){
                content.addClass('scrollBox');
            }
        });
        $(".scrollBox").scrollBar();
    })
    require.config({
        baseUrl: '',
        urlArgs: "bust=" +  (new Date()).getTime(),
        paths: {
            'jquery': 'node_modules/jquery/dist/jquery',
            'jqueryplugin': 'node_modules/jquery-maxlength/jquery.plugin',
            'maxlength': 'node_modules/jquery-maxlength/jquery.maxlength',
            'validation': 'node_modules/jquery-validation/dist/jquery.validate',
            'domReady': 'node_modules/requirejs-domready/domReady',
            'jquerysvg': 'script/svg/jquery.svg',
            'utils':'script/utils',
            'page':'script/page',
            'service':'script/service',
            'oldc_classes': 'script/oldc.classes',
            'oldc_events': 'script/oldc-events',
            'oldc_v3': 'script/oldc-v3',
            'oldc_history': 'script/oldc.history',
        },
        shim: {
            'jqueryplugin': ['jquery'],
            'maxlength': ['jqueryplugin'],
            'validation':['jquery'],
            'jquerysvg': ['jquery'],
            'oldc_classes': ['oldc_history', 'maxlength','page'],
            'oldc_events': ['oldc_classes'],
            'oldc_v3': ['oldc_events','validation', 'jquerysvg', 'node_modules/jquery-ui/ui/widgets/slider','node_modules/jquery-ui/ui/widgets/dialog']
        }
    });
    require(['utils','service','oldc_v3'], function () {
        console.log("启动程序")
    })
</script>
</body>

</html>
